<template>
  <!--  为文档新增引文时弹出的搜索框  -->
  <div style="text-align: center;">
    <el-button text @click="dialogVisible = true" style="float: right">添加引文</el-button>
    <el-dialog v-model="dialogVisible" width="35%" style="min-width: 600px;" :top="'10px'">
      <div class="search-quotation">
        <div style="display: inline-block;float: left;min-width: 120px">
          <search-kind-component v-model="searchKinds"/>
        </div>
        <div style="width: 400px;display: inline-block">
          <el-input placeholder="请输入查询关键词" v-model="kw" style="width: 350px;font-size: 16px"></el-input>
        </div>
        <el-button @click="getQuotations(kw)" style="float: right">搜索</el-button>
      </div>
      <hr>
      <quotation-search-result-component v-model="quotations"/>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="canal">取消</el-button>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button type="primary" @click="add(false)">添加并继续添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {provide, ref, defineModel, inject} from 'vue'
import {addDocQuoApi, getPagedQuotationApi} from '@/apis/quotation.js'
import {ElMessage} from "element-plus";
import QuotationSearchResultComponent from "./QuotationSearchResultComponent.vue";
import SearchKindComponent from "@/components/add/document/common/SearchKindComponent.vue";

const dialogVisible = ref(false)
const kw = ref('')
const quotations = ref([]) // 引文查询结果集合
const index = ref(-1) // 鼠标点击选择的引文的下标
provide('index', index)

const sk_index = ref(0)
const searchKinds = ref(['标题', 'DOI'])
provide('sk_index', sk_index)

const getQuotations = (x) => {
  x = x.trim()
  if (!x) {
    ElMessage.error('请输入查询关键词')
  } else if (sk_index.value === 0 || sk_index.value === 1) {
    getPagedQuotationApi(1, 20, sk_index.value + 1, x).then(resp => {
      if (resp.data.code === 200) {
        index.value = -1 // 取消选中状态
        quotations.value = resp.data.data.records
        console.log(quotations.value)
      } else {
        ElMessage.error(resp.data.msg)
      }
    })
  } else {
    ElMessage.error('查询方式有误')
  }
}

const documentQuotations = defineModel()

// 根据id来判断是否新添加的引文已经存在
const isNotExistInDocument = (quotation) => {
  const list = documentQuotations.value;
  for (let i = 0; i < list.length; i++) {
    if (list[i].id === quotation.id) {
      return false;
    }
  }
  return true
}

const init = (flag) => {
  index.value = -1
  if (flag) {
    kw.value = ''
    quotations.value = []
    dialogVisible.value = false
  }
}

const canal = () => {
  init(true)
}

const doc = inject('doc')

const add = (flag = true) => {
  const i = index.value
  if (i >= 0 && i < quotations.value.length) {
    const quotation = quotations.value[i]
    if (isNotExistInDocument(quotation)) {
      documentQuotations.value.push(quotation)
      ElMessage.success(`添加引文《${quotation.title}》成功`)
      if (doc?.value?.id) {
        addDocQuoApi(doc.value.id, quotation.id)
      }
      init(flag)
    } else {
      ElMessage.info(`引文${quotation.title}已经添加过`)
    }
  } else {
    ElMessage.error('请选择引文')
  }
}


</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}


.search-quotation {
  height: 30px;
  display: flex;
  margin-bottom: 15px;
}
</style>
